<template>
  <div class="header_box">
    <div class="header_top_wrapper">
      <div class="header_top" :class="{ haderIsopen: open }">
        <div class="header_left">
          <img
            class="logo"
            src="@/assets/home/header-logo.png"
            alt=""
            @click="gohome"
          />
          <div class="header_left_title">口腔专业（群）教学资源库</div>
        </div>

        <div class="header_ri" v-show="logCode == -1">
          <div @click="gologin" class="login-btn">登录</div>
        </div>
        <div class="header_ri" v-show="logCode == 1">
          <a class="userCenter" :href="usercenter">{{ username }} 的个人中心</a>
          <img
            @click="openTab"
            class="menu"
            src="@/assets/home/menu.png"
            alt=""
          />
        </div>
      </div>
    </div>

    <div class="header_tab">
      <ul class="header_tab_item">
        <li
          :class="{ active: isactive == index }"
          v-for="(item, index) in headerList"
          :key="item.text"
          @click="goorther(item.url, index)"
        >
          {{ item.text }}
        </li>
      </ul>
    </div>
    <div class="top_img">
      <el-carousel :interval="5000" arrow="always" indicator-position="none">
        <el-carousel-item v-for="img in banner" :key="img.id">
          <img :src="'https://images.weserv.nl/?url=' + img.picpath" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>

  <div class="headerTeb" :class="{ isopen: open }">
    <ul class="headerTeb_item">
      <li
        v-for="item in headerList"
        :key="item.text"
        @click="goorther(item.url)"
      >
        {{ item.text }}
      </li>
    </ul>
  </div>

  <el-dialog v-model="dialogVisible" title="用户登录" width="30%">
    <div class="log_box">
      <el-input v-model="account" class="w-50 m-2" placeholder="账号">
        <template #prefix>
          <el-icon><User /></el-icon>
        </template>
      </el-input>
      <el-input v-model="password" class="w-50 m-2" placeholder="密码">
        <template #prefix>
          <el-icon><Lock /></el-icon>
        </template>
      </el-input>
      <li>
        <el-input
          v-model="code"
          class="w-50 m-2"
          placeholder="字母不分大小写"
        ></el-input>
        <img :src="captchaApi" alt="" @click="getCaptcha" />
        <span @click="getCaptcha">换一张</span>
      </li>
      <button @click="submit">登录</button>
      <li class="log_bottom">
        <span @click="gozhuc">尚未注册？现在注册？</span>
        <span @click="gomima">忘记密码</span>
      </li>
    </div>
  </el-dialog>
</template>

<script setup>
  import {
    getSlides,
    getProjectLogo,
    getUserInfo,
    LoginNew,
    getUserInfoByLogin,
  } from "@/api/home.js";
  import { useRouter } from "vue-router";
  import { reactive, onMounted, ref, onBeforeMount, watch } from "vue";
  import { User, Lock } from "@element-plus/icons-vue";
  const router = useRouter();

  const headerList = reactive([
    {
      text: "网站首页",
      url: "/",
    },
    {
      text: "专业园地",
      url: "/Professional",
    },
    {
      text: "课程中心",
      url: "/Course",
    },
    {
      text: "医考培训",
      url: "/Training",
    },
    {
      text: "技能训练",
      url: "/Skill",
    },
    {
      text: "素材中心",
      url: "/Material",
    },
    {
      text: "虚拟模考",
      url: "http://kouqiangfangzhen.haimijiaoyu.com/home",
    },
  ]);
  const isactive = ref(0);
  const account = ref("");
  const password = ref("");
  const code = ref("");
  const username = ref("");
  const usercenter = ref("");
  const projectName = ref("");
  const projectLogo = ref("");
  const logCode = ref(-1);
  const open = ref(false);
  const banner = ref([]);
  const captchaApi = ref("");
  const dialogVisible = ref(false);

  onBeforeMount(() => {
    getCaptcha();
    if (localStorage.getItem("logCode")) {
      logCode.value = localStorage.getItem("logCode");
    }
    if (localStorage.getItem("username")) {
      username.value = localStorage.getItem("username");
    }
    if (localStorage.getItem("usercenter")) {
      usercenter.value = localStorage.getItem("usercenter");
    }
  });
  onMounted(() => {
    getSlidesF();
    getProjectLogoF();
    if (localStorage.getItem("routerid")) {
      isactive.value = localStorage.getItem("routerid");
    } else {
      localStorage.setItem("routerid", isactive.value);
    }
  });
  watch(
    () => router.currentRoute.value.path,
    (newValue) => {
      let _index = headerList?.findIndex((item) => item.url === newValue);
      isactive.value = _index;
      localStorage.setItem("routerid", _index);
    }
  );

  const gologin = () => {
    window.open(
      "https://sso.icve.com.cn/sso/auth?mode=simple&source=3&redirect=https://www.icve.com.cn"
    );
  };
  const goregister = () => {
    window.open("https://zyk.icve.com.cn/portal/register/register.html");
  };
  const getuserinfor = () => {
    getUserInfo().then((res) => {
      username.value = res.username;
      usercenter.value = "https://www.icve.com.cn" + res.url;
      if (res.username) {
        localStorage.setItem("username", res.username);
      } else {
        localStorage.removeItem("username");
      }
    });
  };
  const getuserloge = () => {
    getUserInfoByLogin().then((res) => {
      if (res.code == -1) {
        localStorage.removeItem("userType");
        localStorage.removeItem("username");
      } else {
        getuserinfor();
        let user = JSON.parse(res.loginInfo);
        localStorage.setItem("userType", user.userType);
      }
    });
  };
  const goorther = (url, idx) => {
    isactive.value = idx;
    localStorage.setItem("routerid", isactive.value);

    open.value = !open.value;
    if (url.startsWith("http") || url.startsWith("https")) {
      window.open(url);
    } else {
      router.push(url);
    }
  };
  const gohome = () => {
    router.push("/");
  };
  const openTab = () => {
    open.value = !open.value;
  };
  const getSlidesF = () => {
    getSlides({ projectId: "dxhzalctqitlv9umq3wtdg" }).then((res) => {
      banner.value = JSON.parse(res.list).obj;
    });
  };
  const getProjectLogoF = () => {
    getProjectLogo({ projectId: "dxhzalctqitlv9umq3wtdg" }).then((res) => {
      projectName.value = res.projectName;
      projectLogo.value = res.url;
    });
  };
  const getCaptcha = () => {
    var captchaApis = `https://zyk.icve.com.cn/portal/VerifyCode/index?_rand=${new Date().getTime()}`;
    captchaApi.value = captchaApis;
  };
  const gozhuc = () => {
    window.location.href =
      "https://zyk.icve.com.cn/portal/register/register.html";
  };
  const gomima = () => {
    window.location.href = "/sso/resetPass";
  };
  const submit = () => {
    var data = {
      userName: account.value,
      password: password.value,
      type: 1,
    };
    LoginNew(data).then((res) => {
      console.log(res, "登录信息");
    });
  };
</script>

<style lang="scss" scoped>
  .log_box {
    .el-input {
      margin-bottom: 20px;
    }
    li {
      .el-input {
        margin-bottom: 0;
        width: 50%;
      }
      img {
        width: 120px;
      }
      span:hover {
        color: #1cabd9;
        cursor: pointer;
      }
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }
    button {
      background-color: #1cabd9;
      border: none;
      width: 100%;
      height: 40px;
      font-size: 16px;
      margin-top: 20px;
      color: #ffffff;
    }
    .log_bottom {
      margin-top: 20px;
      span {
        color: #1cabd9;
      }
    }
  }
  .userCenter {
    color: #1cabd9;
  }
  @media screen and (min-width: 1200px) {
    .headerTeb {
      display: none;
    }
    .header_box {
      width: 100%;

      .header_top_wrapper {
        width: 100%;
        background: url("@/assets/home/bg-header.png") no-repeat left top;
        background-size: auto 112px;
      }

      .header_top {
        width: 974px;
        height: 96px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        div {
          display: flex;
          align-items: center;
        }

        .header_left {
          .logo {
            width: 179px;
            cursor: pointer;
          }
          &_title {
            margin-left: 16px;
            font-size: 20px;
            font-weight: bold;
            color: #1daad9;
          }

          p {
            line-height: 30px;
            font-size: 30px;
            font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
            font-weight: 600;
            color: #1cabd9;
            padding-right: 30px;
            border-right: 1px solid #1cabd9;
          }

          span {
            padding: 0 15px 0 30px;
            font-size: 18px;
            font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
            font-weight: 600;
            color: #333333;
          }
          b {
            font-size: 20px;
            color: #c80331;
          }
        }

        .header_ri {
          .login-btn {
            width: 60px;
            height: 28px;
            background-color: #fdfcff;
            border-radius: 14px;
            border: 1px solid #c7c7c7;
            font-size: 13px;
            color: #888888;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
          .mo_img,
          .menu {
            display: none;
          }

          img {
            width: 30px;
            height: 30px;
          }

          a,
          p {
            padding: 0 10px;
            font-size: 18px;
            font-weight: 400;
            color: #1cabd9;
            line-height: 24px;
            cursor: pointer;
          }

          p:last-child {
            border-left: 1px solid #1cabd9;
          }
        }
      }

      .header_tab {
        width: 100%;
        background-color: #1cabd9;

        .header_tab_item {
          width: 974px;
          margin: 0 auto;
          display: flex;
          justify-content: space-around;

          li {
            flex: 1;
            height: 48px;
            font-size: 16px;
            color: #ffffff;
            letter-spacing: 1px;
            transition: background-color 0.3s;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          li:hover {
            background-color: #0084af;
          }
          .active {
            background-color: #0084af;
          }
        }
      }

      :deep .el-carousel__container {
        height: calc(336 / 12.8) * 1vw;
      }

      .top_img,
      .top_img img {
        width: 100%;
        height: 100%;
      }
    }
  }

  @media screen and (max-width: 1200px) {
    .headerTeb {
      width: 100vw;
      height: 0;
      position: fixed;
      background-color: #1cabd9;
      z-index: 9999;
      top: 18vw;
      overflow: hidden;
      transition: all 0.5s;
      .headerTeb_item {
        padding-top: 3vw;
        li {
          width: 100%;
          color: #ffffff;
          text-align: center;
          padding: 3vw 0;
          border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.3);
        }
      }
    }
    .isopen {
      height: 100vh;
    }
    .header_box {
      width: 100%;
      .header_top_wrapper {
        width: 100%;
        background: url("@/assets/home/bg-header.png") no-repeat left top;
        background-size: calc(556 / 19.2) * 1vw calc(160 / 19.2) * 1vw;
      }

      .header_top {
        width: 100vw;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        div {
          display: flex;
          align-items: center;
          padding: 0 2.5vw;
        }

        .header_left {
          height: 10vw;
          justify-content: space-between;
          div {
            padding: 0 !important;
          }
          .logo {
            height: 7.5vw;
          }
          &_title {
            font-size: calc(30 / 19.2) * 1vw;
            font-weight: bold;
            color: #1daad9;
          }

          p {
            line-height: 4vw;
            font-size: 3vw;
            font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
            font-weight: 600;
            color: #1cabd9;
            padding-right: 2vw;
            border-right: 1px solid #1cabd9;
          }

          span {
            display: none;
            padding: 0 2vw;
            font-size: 1vw;
            font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
            font-weight: 600;
            color: #333333;
          }
          b {
            font-size: 3vw;
            color: #c80331;
          }
        }

        .header_ri {
          width: 100vw;
          background-color: #1cabd9;
          height: 8vw;
          position: relative;
          display: none;

          .pc_img {
            display: none;
          }

          img {
            width: 4vw;
            height: 4vw;
          }

          .menu {
            width: 6vw;
            height: 6vw;
            position: absolute;
            right: 4vw;
          }

          a,
          p {
            padding: 0 2vw;
            font-size: 2.4vw;
            font-weight: 400;
            color: #ffffff;
          }

          a:last-child {
            border-left: 1px solid #ffffff;
          }
        }
      }
      .haderIsopen {
        position: fixed;
        top: 0;
        z-index: 999;
        background-color: #ffffff;
      }
      .header_tab {
        display: none;
      }

      :deep .el-carousel__container {
        // height: 19vw;
        height: calc(500 / 19.2) * 1vw;
      }

      .top_img,
      .top_img img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
